JavaScript 中的 Class

在 ES6 之前，JavaScript 的繼承之類的功能主要是由 protopype 來實現，但到了 ES6 正式推出了 JavaScript 的 Class 後代碼的撰寫開始變得可以更具有結構化了，我們就來介紹 ES6 的 Class 吧

基本構造

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old`)
    }
}

const person1 = new Person('Alice', 30);
person1.greet();

這邊是最基本的用法，我們可以透過 new 一個新物件的方式來使用新增的 Class，並且透過 constructor 來把外部參數拉進來

繼承

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    speak() {
        console.log(`${this.name} barks.`);
    }
}

const myDog = new Dog('Rex', 'Labrador');
myDog.speak();

這邊的使用方式為我們先新增一個 Animal 的物件，內部會有一個 name 的屬性，之後再新增一個 Dog 的屬性並且繼承此 Animal 原先的內容，這樣在 constructor 初始化結構時一樣可以將外部傳過來的 name 透過 super 塞回去從 Animal 繼承來的 name 屬性，並且再將外部的 breed 屬性放到自身裡面，這邊若是能透過 TypeScript 來使用 Class 將會有更多有幫助的內容，推薦若是對於 Class 屬性有興趣的可以先去看看，又或者是這邊後續的文章會介紹，